import React from "react";
import { View, Image, Text } from "react-native";
import { SvgUri } from 'react-native-svg';

type ItemProp = {
  id: string,
  name: string,
  text: string,
  avatar: string,
  img: string,
}

type Props = {
  item: ItemProp,
}

const Item: React.FC<Props> = ({ item }: Props) => {
  return (
    <View style={{
      width: '100%',
      marginVertical: 10,
      paddingHorizontal: 20,
    }}>
      <View style={{
        flexDirection: 'row',
        width: '100%',
        marginTop: 20,
      }}>
        <View style={{
          width: 36,
          height: 36,
        }}>
          {
            item.avatar.includes('.svg')
              ? <SvgUri 
                uri={item.avatar}
                width="100%"
                height="100%"
              />
              : <Image
                style={{
                  width: '100%',
                  height: '100%',
                }}
                source={{ uri: item.avatar }}
              />
          }
        </View>
        <View style={{
          flex: 1,
          marginLeft: 6,
        }}>
          <Text
            style={{
              fontSize: 18,
              color: '#000',
              fontWeight: 700,
            }}
            numberOfLines={1}    // 可选限制行数
            ellipsizeMode="tail" // 超出省略方式...
          >{item.name}</Text>
          <Text
            style={{
              fontSize: 14,
              color: 'gray',
              marginTop: 4,
            }}
            numberOfLines={3}    // 可选限制行数
            ellipsizeMode="tail" // 超出省略方式...
          >{item.text}</Text>
          <View style={{
            width: 80,
            height: 80,
            marginTop: 8,
          }}>
            <Image
              style={{
                width: '100%',
                height: '100%',
              }}
              source={{ uri: item.img }}
            />
          </View>
        </View>
      </View>
    </View>
  )
}

export default Item